<template>
  <PageLayout class="form-container">
    <a-card>
      <div class="form-title">
        {{ route.query.id ? "编辑" : "新增" }}游戏类型
      </div>
      <div class="form-box w-600">
        <a-form :model="formState" :rules="rules" ref="formRef" layout="Vertical" :labelCol="{ style: { width: '150px' } }" :wrapperCol="{ style: { width: 'calc(100% - 150px)' } }">
          <a-form-item label="游戏类型-繁體中文" name="nameTw" required>
            <a-input v-model:value="formState.nameTw" placeholder="请输入游戏类型-繁體中文" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-Français" name="nameFr" required>
            <a-input v-model:value="formState.nameFr" placeholder="请输入游戏类型-Français" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-Deutsch" name="nameDe" required>
            <a-input v-model:value="formState.nameDe" placeholder="请输入游戏类型-Deutsch" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-Español" name="nameSa" required>
            <a-input v-model:value="formState.nameSa" placeholder="请输入游戏类型-Español" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-English" name="nameUs" required>
            <a-input v-model:value="formState.nameUs" placeholder="请输入游戏类型-English" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-日本語" name="nameJp" required>
            <a-input v-model:value="formState.nameJp" placeholder="请输入游戏类型-日本語" :maxlength="50" />
          </a-form-item>
          <a-form-item label="游戏类型-Italiano" name="nameIt" required>
            <a-input v-model:value="formState.nameIt" placeholder="请输入游戏类型-Italiano" :maxlength="50" />
          </a-form-item>
          <a-form-item label="排序" name="sort" required>
            <a-input v-model:value="formState.sort" placeholder="请输入排序" :maxlength="50" />
          </a-form-item>
          <a-form-item label="是否云游戏" name="cloudGameFlag" required>
              <a-select
              v-model:value="formState.cloudGameFlag"
              placeholder="请选择"
              :options="[
                {
                  label: '否',
                  value: 0,
                },
                {
                  label: '是',
                  value: 1,
                },
              ]"
            />
          </a-form-item>

          <a-form-item label="广告图" name="coverUrl" required>
            <UploadImg v-model:imageUrl="formState.coverUrl"></UploadImg>
          </a-form-item>
          <a-button type="primary" class="float-right" style="width: 100px" @click="save">保存</a-button>
        </a-form>
      </div>
    </a-card>
  </PageLayout>
</template>

<script setup>
import { postGameClassifyAdd, postGameClassifyUpdate, postGameClassifyDetail } from "@/api/common";
import { postMenuTreeList } from "@/api/system";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  nameTw: '',
  nameFr: '',
  nameDe: '',
  nameSa: '',
  nameUs: '',
  nameJp: '',
  nameIt: '',
  sort: '',
  cloudGameFlag: 0,
  coverUrl: "",
  remark: "",
});
const treeData = ref([]);

function resetTreeData(tree) {
  let resultTree = [];
  tree.forEach((item) => {
    let btnList = item.childrenList?.filter((ele) => {
      return ele.menuType == "F";
    });
    let curComponent = {
      ...item,
      // children: item.childrenList,
      label: item.menuName,
      value: item.id,
      btnList,
    };
    console.log("curComponent", curComponent);
    curComponent.children = resetTreeData(item.childrenList);
    resultTree.push(curComponent);
  });

  return resultTree;
}

onMounted(async () => {
  if (route.query.id) {
    postGameClassifyDetail({ id: route.query.id }).then((res) => {
      for (let key in formState) {
        formState[key] = res.data[key];
      }
    });
  }
});

const rules = {
  roleName: [{ required: true, message: "请输入用户名/姓名", trigger: "blur" }],
  username: [{ required: true, message: "请输入账号/邮箱", trigger: "blur" }],
  // menuIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
};

const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postGameClassifyUpdate : postGameClassifyAdd;
    requestUrl({ ...formState }).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
